<template>
  <div>
    <div>
      <el-card style="width: 50%;margin-left: 400px">
        <div slot="header" class="clearfix">
          <span>文件上传下载</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible=true">创建项目文件夹
          </el-button>
        </div>
      </el-card>


      <el-dialog
          title="创建项目文件夹"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <el-input placeholder="客户id" v-model="prosend.cusid">

        </el-input>
        <el-input placeholder="项目名称" v-model="prosend.name">

        </el-input>
        <el-input placeholder="日期" v-model="prosend.starttime">

        </el-input>

        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
  <el-upload
      accept="jpg"
      action="http://localhost:9088/file/createProject"
      :on-success="handleFileUpload"
      :data="{cusid:prosend.cusid,name:prosend.name,starttime: prosend.starttime}"
      :file-list="fileList"
      list-type="picture"
  >
          <el-button size="small" type="primary">点击上传资料文件并创建</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
  </span>
      </el-dialog>


    </div>
    <div style="margin-left: 500px">
      <el-upload
          :on-change="handleChange"
          action="http://localhost:9088/file/upload"
          :on-success="handleFileUpload"
          :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <div>
        <el-button @click="download">
          下载文件
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Qs from "qs";

export default {
  name: "test",
  data() {
    return {
      prosend: {
        name: '',
        mxid: '',
        xrid: '',
        hqid: '',
        state: '',
        cusid: '',
        starttime: '',
        endtime: '',
        price: ''
      },
      fileList: [],
      dialogVisible: false,
      send: {
        fileName: '',
        name: ''
      }

    }
  },
  methods: {
    createProject() {
this.$axios.post("http://localhost:9088/file/createProject",Qs.stringify(this.prosend)).then(res=>res.data).then(res=>{

})
    },
    download() {
      this.$axios.get("http://localhost:9088/file/download?fileName="+this.send.fileName).then(res => res.data).then(res => {
alert("http://localhost:9088/file/download?fileName="+this.send.fileName)
      })
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    handleFileUpload(res, file, filelist) {
      this.fileList = filelist
      this.send.fileName = res.data
      console.log(this.send.fileName)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }
  }
}
</script>

<style scoped>

</style>